<style lang="less" scoped>
  .time-line{
    width: 100%;
    height: 100%;
    &_content{
      width: calc(100% - 300px);
      height: 100%;
      padding: 10px;
      display: inline-flex;;
    }
    &_patient{
      height: 100%;
      background: url('~@/images/contentbox.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      padding: 10px;
      width: 300px;
      height: 100%;
      padding: 10px;
      display: inline-block;
      vertical-align: top;
      .patient_title{
        height: 40px;
        background: url('~@/images/contenttitle.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 80% 50%;
        text-align: center;
        color: #00F6FF;
        line-height: 40px;
        margin-bottom: 5px;
      }
      .patient_info{
        width: 100%;
        text-align: left;
        font-size: 16px;
        line-height: 30px;
        margin-left: 50px;
        color: #00F6FF;
      }
    }
    .content-left{
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content-box{
      width: calc(100% - 200px);
      height: 100%;
      display: flex;
      .time-height{
        height: 40px;
      }
      .time-width{
        width: 78px;
      }
      &_node{
        width: 90px;
        height: 100%;
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: space-evenly;
        .content-back{
          line-height: 40px;
          border-radius: 4px;
          background: linear-gradient(-85deg, #2B42EA 0%, #4CC2FC 100%);
        }
      }
      &_matter{
        display: flex;
        width: 78px;
        width: calc(100% - 90px);
        overflow-x: auto;
      }
      .node-dotted{
        border:1px dashed #01EEF6;
        height:0;
        width: 100%;
        text-align: center;
        position: relative;
        .node-circle{
          width: 10px;
          height: 10px;
          display: inline-block;
          background-color: #fff;
          border-radius: 10px;
          position: absolute;
          top: -5px;
        }
      }
      .node-solid{
        border:1px solid #59BCFB;
        height:0;
        width: 100%;
        text-align: center;
        position: relative;
        .node-circle{
          width: 10px;
          height: 10px;
          display: inline-block;
          background-color: #fff;
          border-radius: 10px;
          position: absolute;
          top: -5px;
        }
      }
    }
    /deep/.el-carousel__container{
      height: 100%;
    }
    .content-right{
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
      background-color: #034694;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #0A306F;
      border-radius: 3px;
    }
  }
</style>

<template>
  <div class="time-line" style="color: #fff">
    <el-carousel style="height: 100%;">
      <el-carousel-item v-for="(csItem, index) in timeLineData" :key="index" :interval="1000" style="height: 100%;">
        <div class="time-line_patient">
          <div class="patient_title">
            <span>当前患者</span>
          </div>
          <div class="patient_info">编号：{{ csItem.patientInfo.dispatchId }}</div>
          <div class="patient_info">姓名：{{ csItem.patientInfo.name }}</div>
          <div class="patient_info">性别：{{ csItem.patientInfo.gender }}</div>
          <div class="patient_info">年龄：{{ csItem.patientInfo.age }}</div>
        </div>
        <div class="time-line_content">
          <div class="content-left">
            <i class="el-icon-caret-left" style="color: #7DDBFB;" @click="clickLeft(index)" />
          </div>
          <div class="content-box">
            <div class="content-box_node">
              <div class="time-height content-back">时间节点：</div>
              <div class="node-dotted" />
              <div class="time-height content-back">发生时间：</div>
              <div class="node-solid" />
              <div class="time-height content-back">实际时长：</div>
            </div>
            <div ref="timeTag" class="content-box_matter">
              <div v-for="(item, i) in csItem.timeAxise" :key="i" class="content-box_node">

                <div class="time-height time-width" :style="{color: item.color == 2 ? '#59BCFB' : '' }">{{ item.timeName }}</div>

                <div class="node-dotted">
                  <div class="node-circle" :style="{backgroundColor: item.color == 1 ? '#FFD300' : item.color == 2 ? '#59BCFB' : '' }" />
                </div>

                <div class="time-height time-width" :style="{color: item.color == 2 ? '#59BCFB' : '' }">{{ item.timeLabel }}</div>

                <div class="node-solid">
                  <div class="node-circle" :style="{backgroundColor: item.color == 1 ? '#FFD300' : item.color == 2 ? '#59BCFB' : '' }" />
                </div>

                <div class="time-height time-width" :style="{color: item.color == 2 ? '#59BCFB' : '' }">{{ item.minutesInterval }}</div>

              </div>
            </div>
          </div>
          <div class="content-right">
            <i class="el-icon-caret-right" style="color: #7DDBFB;" @click="clickRight(index)" />
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getTimeAxisNew, getStrokeTimeAxisNew } from '@/api/comprehensive/timeLine'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      timeLineData: [],
      patientInfo: {
        dispatchId: '',
        name: '',
        gender: '',
        age: ''
      },
      interVal: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.interVal = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.interVal)
  },
  methods: {
    init() {
      // this.timeLineData = []
      // this.patientInfo = {
      //   dispatchId: '',
      //   name: '',
      //   sex: '',
      //   age: ''
      // }
      if (this.isStrock == 'chestPain') {
        getTimeAxisNew({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              if (res.data.timeAxises && res.data.timeAxises.length > 0) {
                this.timeLineData = res.data.timeAxises
              }
              if (res.data.patientInfo) {
                this.patientInfo = {
                  dispatchId: res.data.patientInfo.dispatchId ? res.data.patientInfo.dispatchId : '',
                  name: res.data.patientInfo.name ? res.data.patientInfo.name : '',
                  gender: res.data.patientInfo.gender ? res.data.patientInfo.gender : '',
                  age: res.data.patientInfo.age ? res.data.patientInfo.age : ''
                }
              }
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        getStrokeTimeAxisNew({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              if (res.data.timeAxises && res.data.timeAxises.length > 0) {
                this.timeLineData = res.data.timeAxises
              }
              if (res.data.patientInfo) {
                this.patientInfo = {
                  dispatchId: res.data.patientInfo.dispatchId ? res.data.patientInfo.dispatchId : '',
                  name: res.data.patientInfo.name ? res.data.patientInfo.name : '',
                  gender: res.data.patientInfo.gender ? res.data.patientInfo.gender : '',
                  age: res.data.patientInfo.age ? res.data.patientInfo.age : ''
                }
              }
            }
          }
        })
      }
    },
    clickLeft(index) {
      this.$refs.timeTag[index].scrollLeft -= 300
    },
    clickRight(index) {
      this.$refs.timeTag[index].scrollLeft += 300
    }
  }
}
</script>
